<template>
  <div id="main-nav">
    <div class="main-nav-con">
      <h1 id="logo">
        <a href="/" class="h-pic-logo"></a>
      </h1>
      <div class="main-nav-menu">
       <search :placeholder="'请输入要搜索的词'"></search>
      </div>
    </div>
  </div>
</template>

<script>
  import search from './search.vue'
  export default{
    data() {
      return {
        msg: '11'
      }
    },
    components: {
      search
    }
  }
</script>

<style lang="scss" scoped>
#main-nav {
  background-color: #ef0282;
  border-bottom: 1px solid #ef0282;
  .main-nav-con {
    width: 1230px;
    margin: 0 auto;
    height: 67px;
    border: 1px solid #ef0282;
    #logo {
      float: left;
      margin-right: 67px;
      margin-top: 22px;
      margin-left: 12px;
      .h-pic-logo {
        display: inline-block;
        width: 196px;
        height: 34px;
        background: url('../../../assets/logo1.png') no-repeat 0 0;
         background-size: contain;
      }
    }
    .main-nav-menu {
      float: right;
      margin-top: 20px;
      height: 32px;
    }
  }
}

@media screen and (max-width: 990px) {
  #main-nav .main-nav-con {
    max-width: 94%;
    padding-left: 3%;
    padding-right: 3%;
  }
}
</style>